<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='ie=edge'>
    <title>Document</title>
</head>
<body>
    <div id='app'>
        <input type="text" v-model="inputmsg"/>{{inputmsg}}
        <hr>
        <input type="radio" v-model="sex" value="0">男
        <input type="radio" v-model="sex" value="1">女
        <hr>
        <!-- 复选框 单个情况  单个复选框 绑定到布尔值
         -->
         <input type="checkbox" v-model="check1"/> {{check1}}
         <hr>
         <!-- 复选框 多个复选框 绑定到数组-->
         <input type="checkbox" v-model="hobby" value="one"/> 不
         <input type="checkbox" v-model="hobby" value="two"/> 是
         <input type="checkbox" v-model="hobby" value="san"/> 中{{hobby}}
         <hr>
         <!-- 下拉列表  选中当个绑定到option项具体的值 -->
         <select v-model="language">
             <option value="1">中文</option>
             <option value="2">日语</option>
             <option value="3">英语</option>
             <option value="4">汉语</option>
         </select>

<!-- 选中多个绑定数组  option 项具体值会存到数组中  multiple多选属性 -->
<select v-model="language2">
    <option value="1">中文</option>
    <option value="2">日语</option>
    <option value="3">英语</option>
    <option value="4">汉语</option>
</select>
    </div>
    <script src='https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js'></script>
    <script>
        new Vue({
            el: '#app',
            data:{ 
                inputmsg:"底黑合法好和覅",
                sex:"",
                chenck1:false,
                hobby:["one"],
                language:1,
                language2:[]
             },
            methods:{},
        })
    </script>
</body>
</html>